<template>
  <div class="h-100%">
    <!-- 加载状态 -->
    <div v-if="loading" class="flex justify-center items-center py-20">
      <div class="loading-spinner"></div>
      <span class="ml-4 text-white/70">正在加载比赛详情...</span>
    </div>

    <div v-else-if="matchDetail" class="px-4 md:px-6 pb-20 pt-10">
      <div class="max-w-7xl mx-auto mb-2">
        <div class="text-sm text-white/70">
          <strong>重要提示：</strong>
          本页面提供的是基于公开数据的比赛分析和数据展示，仅供体育爱好者学习和了解比赛使用，
          不构成任何购彩建议。比赛存在不确定性，请理性看待。
        </div>
      </div>

      <div class="max-w-7xl mx-auto space-y-6">
        <!-- 左右布局：比赛信息 + AI分析 -->
        <div class="card bg-white/5 backdrop-blur-sm border border-white/10">
          <!-- 头部：联赛和时间 -->
          <div
            class="flex flex-col md:flex-row md:items-center md:justify-between gap-2 mb-6 pb-4 border-b border-white/10">
            <div class="flex items-center gap-3">
              <div class="w-2 h-2 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full"></div>
              <span class="text-white/90 font-medium">{{ matchDetail.leagueName }}</span>
              <span class="text-white/50">|</span>
              <span class="text-white/70 text-sm">{{ matchDetail.weekday }} {{ formatDateTime(matchDetail.matchTime)
              }}</span>
            </div>
            <div class="text-white/50 text-xs">编号: {{ matchDetail.matchNum }}</div>
          </div>

          <!-- 队伍对阵 -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <!-- 主队 -->
            <div class="flex flex-col items-center text-center">
              <h3 class="text-lg font-bold text-white mb-1 cursor-pointer hover-op-60"
                @click="onTurn(`https://www.sporttery.cn/zqlszl/qdzl/index.html?gmtid=${matchDetail.homeTeam.id}`)">
                {{ matchDetail.homeTeam.name }}
              </h3>
              <p class="text-white/50 text-xs">排名: {{ matchDetail.homeTeam.rank }}</p>
            </div>

            <!-- VS -->
            <div class="flex flex-col items-center justify-center">
              <template v-if="homeScore && awayScore">
                <div class="flex items-center gap-3">
                  <div class="text-3xl font-bold text-yellow-400">{{ homeScore }}</div>
                  <div class="text-xl font-bold text-white/30 cursor-pointer hover-op-60"
                    @click="onTurn(`https://www.sporttery.cn/jc/zqdz/index.html?showType=2&mid=${matchDetail.matchId}`)">
                    VS
                  </div>
                  <div class="text-3xl font-bold text-orange-400">{{ awayScore }}</div>
                </div>
                <div v-if="halfHomeScore && halfAwayScore" class="text-sm text-white/50 mt-1">
                  ({{ halfHomeScore }}:{{ halfAwayScore }})
                </div>
              </template>
              <div v-else class="text-2xl font-bold text-white/30 cursor-pointer hover-op-60"
                @click="onTurn(`https://www.sporttery.cn/jc/zqdz/index.html?showType=2&mid=${matchDetail.matchId}`)">
                VS
              </div>
            </div>

            <!-- 客队 -->
            <div class="flex flex-col items-center text-center">
              <h3 class="text-lg font-bold text-white mb-1 cursor-pointer hover-op-60"
                @click="onTurn(`https://www.sporttery.cn/zqlszl/qdzl/index.html?gmtid=${matchDetail.awayTeam.id}`)">
                {{ matchDetail.awayTeam.name }}
              </h3>
              <p class="text-white/50 text-xs">排名: {{ matchDetail.awayTeam.rank }}</p>
            </div>
          </div>

          <!-- 赔率信息 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-white/10">
            <!-- 胜平负 -->
            <div>
              <div class="text-xs text-white/50 mb-2 flex items-center gap-1">
                <i class="i-carbon-trophy text-yellow-400"></i>
                胜平负
              </div>
              <div class="grid grid-cols-3 gap-2">
                <div class="text-center p-2 bg-white/5 rounded">
                  <div class="text-xs text-white/60 mb-1">主胜</div>
                  <div class="text-lg font-bold text-yellow-400">{{ matchDetail.odds.had.h || '-' }}</div>
                </div>
                <div class="text-center p-2 bg-white/5 rounded">
                  <div class="text-xs text-white/60 mb-1">平局</div>
                  <div class="text-lg font-bold text-white">{{ matchDetail.odds.had.d || '-' }}</div>
                </div>
                <div class="text-center p-2 bg-white/5 rounded">
                  <div class="text-xs text-white/60 mb-1">客胜</div>
                  <div class="text-lg font-bold text-orange-400">{{ matchDetail.odds.had.a || '-' }}</div>
                </div>
              </div>
            </div>

            <!-- 让球 -->
            <div>
              <div class="text-xs text-white/50 mb-2 flex items-center gap-1">
                <i class="i-carbon-football text-orange-400"></i>
                让球 <span class="text-white/70">{{ matchDetail.odds.hhad.goalLine }}</span>
              </div>
              <div class="grid grid-cols-3 gap-2">
                <div class="text-center p-2 rounded transition-colors border bg-white/5"
                  :class="getHandicapOddsClass('home')">
                  <div class="text-xs text-white/60 mb-1">主胜</div>
                  <div class="text-lg font-bold text-yellow-400">{{ matchDetail.odds.hhad.h || '-' }}</div>
                </div>
                <div class="text-center p-2 rounded transition-colors border bg-white/5"
                  :class="getHandicapOddsClass('draw')">
                  <div class="text-xs text-white/60 mb-1">平局</div>
                  <div class="text-lg font-bold text-white">{{ matchDetail.odds.hhad.d || '-' }}</div>
                </div>
                <div class="text-center p-2 rounded transition-colors border bg-white/5"
                  :class="getHandicapOddsClass('away')">
                  <div class="text-xs text-white/60 mb-1">客胜</div>
                  <div class="text-lg font-bold text-orange-400">{{ matchDetail.odds.hhad.a || '-' }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 推荐建议 -->
          <div class="my-6">
            <h4 class="text-lg font-bold text-white flex items-center gap-3 mb-4">
              <span>AI分析（{{ analysisData?.rating }}/10）</span>
              <!-- 评分圆球 -->
              <div class="flex items-center gap-1">
                <div v-for="index in 5" :key="index" class="w-4 h-4 rounded-full transition-all"
                  :style="getRatingBallStyle(index)"></div>
              </div>
            </h4>
            <p class="text-base text-white/90 leading-relaxed" :class="{ 'blur-sm': showMask }">
              {{ analysisData?.final_investment_advice }}
            </p>
          </div>

          <!-- 胜率分析 - 可视化 -->
          <div class="mb-6">
            <div class="grid grid-cols-3 gap-3" :class="{ 'blur-sm': showMask }">
              <!-- 主胜 -->
              <div class="text-center p-3 rounded-lg border transition-colors"
                :class="getProbabilityCardClass('home_win') || 'bg-white/5 border-yellow-500/20 hover:border-yellow-500/40'">
                <div class="text-xs text-white/60 mb-1">主队获胜</div>
                <div class="text-2xl font-bold text-yellow-400 mb-1">{{ formatProbability(analysisData?.probabilities?.home_win) }}</div>
                <div class="text-xs text-white/50">{{ matchDetail?.homeTeam?.name }}</div>
              </div>
              <!-- 平局 -->
              <div class="text-center p-3 rounded-lg border transition-colors"
                :class="getProbabilityCardClass('draw') || 'bg-white/5 border-gray-500/20 hover:border-gray-500/40'">
                <div class="text-xs text-white/60 mb-1">平局</div>
                <div class="text-2xl font-bold text-white mb-1">{{ formatProbability(analysisData?.probabilities?.draw) }}</div>
                <div class="text-xs text-white/50">Draw</div>
              </div>
              <!-- 客胜 -->
              <div class="text-center p-3 rounded-lg border transition-colors"
                :class="getProbabilityCardClass('away_win') || 'bg-white/5 border-orange-500/20 hover:border-orange-500/40'">
                <div class="text-xs text-white/60 mb-1">客队获胜</div>
                <div class="text-2xl font-bold text-orange-400 mb-1">{{ formatProbability(analysisData?.probabilities?.away_win) }}</div>
                <div class="text-xs text-white/50">{{ matchDetail?.awayTeam?.name }}</div>
              </div>
            </div>
          </div>

          <!-- 最可能比分 -->
          <div class="mb-4">
            <h4 class="text-base font-semibold text-white mb-3 flex items-center">
              <i class="i-carbon-trophy text-green-400"></i>
              最可能比分
            </h4>
            <div class="flex flex-wrap gap-2" :class="{ 'blur-sm': showMask }">
              <span v-for="scoreline in analysisData?.most_likely_scorelines" :key="scoreline"
                class="px-4 py-2 rounded-lg text-sm font-bold shadow-lg transition-all" :class="isScorelineMatch(scoreline)
                  ? 'bg-gradient-to-r from-yellow-500 to-orange-500 text-white border-2 border-yellow-300 scale-110'
                  : 'bg-gradient-to-r from-green-600 to-emerald-600 text-white'
                  ">
                {{ scoreline }}
              </span>
              <span v-if="!analysisData?.most_likely_scorelines?.length" class="text-white/50 text-sm">数据不够，暂无分析</span>
            </div>
          </div>
        </div>

        <!-- 📊 详细分析 - 可折叠 -->
        <div v-if="analysisData" class="card bg-white/5 backdrop-blur-sm relative">
          <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
            <i class="i-carbon-document text-white/70"></i>
            详细分析
          </h3>

          <div class="space-y-6" :class="{ 'blur-sm': showMask }">
            <div class="p-4 bg-white/5 rounded-lg">
              <h4 class="text-base font-semibold text-white mb-2 flex items-center gap-2">
                <i class="i-carbon-chart-line text-yellow-400 text-sm"></i>
                实力与状态
              </h4>
              <p class="text-white/80 text-sm leading-relaxed">
                {{ analysisData?.analysis_breakdown?.strength_and_form || '数据不够，暂无分析' }}
              </p>
            </div>

            <div class="p-4 bg-white/5 rounded-lg">
              <h4 class="text-base font-semibold text-white mb-2 flex items-center gap-2">
                <i class="i-carbon-target text-orange-400 text-sm"></i>
                战意与动机
              </h4>
              <p class="text-white/80 text-sm leading-relaxed">
                {{ analysisData?.analysis_breakdown?.motivation || '数据不够，暂无分析' }}
              </p>
            </div>

            <div class="p-4 bg-white/5 rounded-lg">
              <h4 class="text-base font-semibold text-white mb-2 flex items-center gap-2">
                <i class="i-carbon-trending-up text-amber-400 text-sm"></i>
                关键因素分析
              </h4>
              <p class="text-white/80 text-sm leading-relaxed">
                {{ analysisData?.analysis_breakdown?.key_factors || '数据不够，暂无分析' }}
              </p>
            </div>
          </div>
        </div>

        <!-- VIP 遮罩层 -->
        <div v-if="showMask"
          class="absolute top-400px left-50% -translate-x-1/2 flex items-center justify-center backdrop-blur-[2px] rounded-xl cursor-pointer">
          <div
            class="text-center px-6 py-8 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 backdrop-blur-sm rounded-lg border-2 border-yellow-500/50 shadow-2xl"
            @click="handleUpgradeVIP">
            <i class="i-carbon-locked text-5xl text-yellow-400 mb-4"></i>
            <h4 class="text-xl font-bold text-white mb-2">{{ isLoggedIn ? 'VIP 专属内容' : '请先登录' }}</h4>
            <p class="text-white/80 text-sm mb-4">{{ isLoggedIn ? '升级 VIP 解锁详细分析' : '登录后查看详细分析' }}</p>
            <button
              class="cursor-pointer px-6 py-2 bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-semibold rounded-lg hover:op-80 hover:shadow-lg transition-all">
              {{ isLoggedIn ? '立即升级' : '立即登录' }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="text-center py-20">
      <div class="w-24 h-24 bg-red-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
        <Logo :show-text="false" :turn="false" class="scale-150" />
      </div>
      <h3 class="text-xl font-semibold text-white mb-2">数据分析中</h3>
      <p class="text-white/60 mb-6">数据分析中，请耐心等待分析，稍后重试</p>
      <button @click="refreshData" class="btn-primary">重新加载</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { getTodayFootballList, getTodayFootballAnalysis, MatchStatus, HandicapStatus } from '~/apis/football';
import type { MatchData, MatchItem, AnalysisJson } from '~/apis/football';
import { useUserStore } from '~/stores/user';

// 获取路由参数
const route = useRoute();
const matchId = computed(() => route.query.matchId as string); // 改为 query.id

// 获取用户信息
const userStore = useUserStore();
const { userInfo, isLoggedIn } = storeToRefs(userStore);

// 获取配置
const runtimeConfig = useRuntimeConfig();
const distancePercent = runtimeConfig.public.distancePercent as number;

// SEO配置
useSEO({
  title: '足球比赛详情 - 球球助手',
  description: '查看详细的足球比赛信息和数据展示',
  keywords: '足球比赛,比赛详情,数据查询,比赛信息',
});

// 响应式数据
const matchDetail = ref<MatchData | null>(null);
const matchInfo = ref<Omit<MatchItem, 'MatchAnalysis'> | null>(null);
const analysisData = ref<AnalysisJson | null>();
//   {
//   rating: '7.5',
//   probabilities: {
//     home_win: '48.5%',
//     draw: '28.2%',
//     away_win: '23.3%',
//   },
//   analysis_breakdown: {
//     strength_and_form:
//       '曼城近期状态出色，近10场比赛取得8胜2平的不败战绩，进攻端表现强势，场均打入2.3球。利物浦虽然实力不俗，但客场作战能力略显不足，近5个客场仅取得2胜3负。从整体实力和状态对比来看，主队优势明显。',
//     motivation:
//       '曼城目前领跑积分榜，渴望在主场继续扩大优势，战意十足。利物浦虽然排名第二，但近期连续征战欧战杯赛，体能消耗较大，本场比赛可能采取保守战术。双方战意存在差异，主队更有求胜欲望。',
//     key_factors:
//       '从赔率走势来看，主胜赔率从2.20持续下调至2.10，资金明显集中在主队身上。让球盘口开出-1球，机构对主队实力认可度较高。结合市场情绪和资金流向，主队不败概率较大。',
//   },
//   most_likely_scorelines: ['2-1', '2-0', '1-1', '3-1'],
//   final_investment_advice:
//     '综合各方面因素分析，建议重点关注主队不败（胜/平），主胜概率较高。如果追求稳健，可以选择主队让球平负作为保险选项。不建议盲目追高赔率客胜，风险较大。',
// }

const showMask = computed(
  () => matchInfo?.value?.status === MatchStatus.NOT_STARTED && userInfo.value?.role !== 'VIP' && !analysisData.value,
);

// 计算评分圆球样式
const getRatingBallStyle = (index: number) => {
  const rating = Number(analysisData.value?.rating) || 0;
  const filledBalls = rating / 2; // 10分制转换为5个圆球

  if (index <= Math.floor(filledBalls)) {
    // 全黄色圆球
    return { backgroundColor: '#facc15' }; // yellow-400
  } else if (index === Math.ceil(filledBalls) && filledBalls % 1 !== 0) {
    // 半黄色圆球 - 使用线性渐变
    const percentage = (filledBalls % 1) * 100;
    return {
      background: `linear-gradient(to right, #facc15 ${percentage}%, #4b5563 ${percentage}%)`,
    };
  } else {
    // 灰色圆球
    return { backgroundColor: '#4b5563' }; // gray-600
  }
};

// 获取分析准确性和分析的结果类型
const getPredictionResult = computed(() => {
  if (!analysisData.value || !matchInfo.value) return null;

  const probabilities = analysisData.value.probabilities || {};

  // 解析概率字符串
  const parseProb = (probStr: string) => probStr ? parseFloat(String(probStr)?.replace('%', '')) : 0;
  const homeWinProb = parseProb(probabilities.home_win);
  const drawProb = parseProb(probabilities.draw);
  const awayWinProb = parseProb(probabilities.away_win);

  // 找出概率最高的分析结果
  const maxProb = Math.max(homeWinProb, drawProb, awayWinProb);

  // 平局概率-主客最大值>=差距概率+比赛未开始
  if (maxProb === drawProb && Math.abs(drawProb - Math.max(homeWinProb, awayWinProb)) >= distancePercent && matchInfo.value.status === MatchStatus.NOT_STARTED) {
    return {
      type: 'draw',
      accurate: 'pending',
    };
  }

  // 判断胜负关系差距，显示颜色
  if (Math.abs(homeWinProb - awayWinProb) < distancePercent && matchInfo.value.status === MatchStatus.NOT_STARTED) return null;

  // 确定分析的类型
  let predictedType: 'home_win' | 'draw' | 'away_win';
  let predictedResult: MatchStatus;

  if (maxProb === homeWinProb) {
    predictedType = 'home_win';
    predictedResult = MatchStatus.WINNING;
  } else if (maxProb === drawProb) {
    predictedType = 'draw';
    predictedResult = MatchStatus.DRAW;
  } else {
    predictedType = 'away_win';
    predictedResult = MatchStatus.LOSING;
  }

  // 如果比赛未开始，返回'pending'显示黄色
  if (matchInfo.value.status === MatchStatus.NOT_STARTED) {
    return {
      type: predictedType,
      accurate: 'pending',
    };
  }

  // 比较分析结果与实际结果
  const isAccurate = predictedResult === matchInfo.value.status;

  return {
    type: predictedType,
    accurate: isAccurate,
  };
});

// 获取概率卡片的样式类
const getProbabilityCardClass = (type: 'home_win' | 'draw' | 'away_win') => {
  const result = getPredictionResult.value;

  if (!result || result.type !== type) {
    return '';
  }

  if (result.accurate === 'pending') {
    return 'bg-yellow-500/20 border-yellow-500/50';
  } else if (result.accurate === true) {
    return 'bg-green-500/20 border-green-500/50';
  }
  // else {
  //   return 'bg-red-500/20 border-red-500/50';
  // }
};

// 获取让球赔率卡片的样式类
const getHandicapOddsClass = (type: 'home' | 'draw' | 'away') => {
  if (!analysisData.value) return 'bg-white/5';
  const result = getPredictionResult.value;
  const goalLine = matchDetail.value?.odds?.hhad?.goalLine;
  const goalLineStr = String(goalLine).trim();
  const handicap = parseFloat(goalLineStr);
  const status = matchInfo.value?.status;

  // 解析概率字符串
  const probabilities = analysisData.value?.probabilities;
  const parseProb = (probStr: string) => probStr ? parseFloat(String(probStr)?.replace('%', '')) : 0;
  const homeWinProb = parseProb(probabilities.home_win);
  const drawProb = parseProb(probabilities.draw);
  const awayWinProb = parseProb(probabilities.away_win);
  const maxProb = Math.max(homeWinProb, drawProb, awayWinProb);

  // 1) 比赛未开始且平局概率最大，让球显示绿色提示
  if (matchInfo.value?.status === MatchStatus.NOT_STARTED && maxProb === drawProb) {
    if (type === 'home' && handicap > 0) return 'bg-yellow-500/20 border-yellow-500/50';
    if (type === 'away' && handicap < 0) return 'bg-yellow-500/20 border-yellow-500/50';
  }
  if (!result || !goalLine || !status) return 'bg-white/5';

  // 2) 主胜概率最大，结果主胜+让球>0，让球主胜显示绿色提示
  if (maxProb === homeWinProb && status === MatchStatus.WINNING && type === 'home' && handicap > 0) return 'bg-green-500/20! border-green-500/50';

  // 3) 客胜概率最大，结果客胜+让球<0，让球主胜显示绿色提示
  if (maxProb === awayWinProb && status === MatchStatus.LOSING && type === 'away' && handicap < 0) return 'bg-green-500/20! border-green-500/50';

  // 4) 平局概率最大，结果平局，让球反方显示绿色提示
  if (maxProb === drawProb && status === MatchStatus.DRAW) {
    if (type === 'home' && handicap > 0) return 'bg-green-500/20! border-green-500/50';
    if (type === 'away' && handicap < 0) return 'bg-green-500/20! border-green-500/50';
  }
};

// 计算拆分后的比分
const homeScore = computed(() => {
  if (!matchInfo.value?.fullScore) return null;
  const scores = matchInfo.value.fullScore.split(':');
  return scores[0]?.trim();
});

const awayScore = computed(() => {
  if (!matchInfo.value?.fullScore) return null;
  const scores = matchInfo.value.fullScore.split(':');
  return scores[1]?.trim();
});

// 计算半场比分
const halfHomeScore = computed(() => {
  if (!matchInfo.value?.hadScore) return null;
  const scores = matchInfo.value.hadScore.split(':');
  return scores[0]?.trim();
});

const halfAwayScore = computed(() => {
  if (!matchInfo.value?.hadScore) return null;
  const scores = matchInfo.value.hadScore.split(':');
  return scores[1]?.trim();
});

// 判断比分是否正确（是否在预测的比分列表中）
const isScoreCorrect = computed(() => {
  if (!homeScore.value || !awayScore.value || !analysisData.value?.most_likely_scorelines) {
    return false;
  }

  // 格式化实际比分为 "主-客" 格式（例如 "2-1"）
  const actualScore = `${homeScore.value}-${awayScore.value}`;

  // 检查实际比分是否在预测比分列表中
  return analysisData.value.most_likely_scorelines.some((predictedScore) => {
    // 处理可能的格式差异（"-" 或 ":"）
    const normalizedPredicted = predictedScore.trim().replace(/:/g, '-');
    return normalizedPredicted === actualScore;
  });
});

// 判断单个预测比分是否与实际比分匹配
const isScorelineMatch = (scoreline: string) => {
  if (!homeScore.value || !awayScore.value) {
    return false;
  }

  // 格式化实际比分为 "主-客" 格式（例如 "2-1"）
  const actualScore = `${homeScore.value}-${awayScore.value}`;

  // 处理可能的格式差异（"-" 或 ":"）
  const normalizedPredicted = scoreline.trim().replace(/:/g, '-');

  return normalizedPredicted === actualScore;
};

// 获取比赛详情和分析数据
const loading = ref(false);
const fetchMatchDetail = async () => {
  try {
    loading.value = true;

    // 获取分析数据
    const analysisResponse = await getTodayFootballAnalysis(Number(matchId.value));
    if (analysisResponse?.data) {
      if (analysisResponse.data.analysisData) analysisData.value = analysisResponse.data.analysisData;
      matchInfo.value = analysisResponse.data.Match; // 保存完整的 Match 对象
      matchDetail.value = analysisResponse.data?.Match?.matchData;
    }
  } catch (error) {
    console.error('获取比赛详情失败:', error);
  }
  loading.value = false;
};

// 刷新数据
const refreshData = async () => {
  await fetchMatchDetail();
};

// 格式化日期时间
const formatDateTime = (timeStr: string) => {
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  });
};

// 格式化概率值：如果是数字则加%，如果是字符串则直接返回
const formatProbability = (value: string | number | null | undefined) => {
  if (value === null || value === undefined) return '';

  // 如果是数字类型，直接加%
  if (typeof value === 'number') {
    return `${value.toFixed(1)}%`;
  }

  // 如果是字符串类型
  if (typeof value === 'string') return value;

  return String(value);
};

// 处理升级VIP点击事件
const handleUpgradeVIP = () => {
  if (!isLoggedIn.value) {
    // 未登录，跳转到登录页
    navigateTo('/login');
  } else {
    // 已登录，跳转到兑换卡密页
    navigateTo('/card-redeem');
  }
};

// 监听路由参数变化
watch(
  () => route.query.matchId,
  async (newId) => {
    if (newId) {
      analysisData.value = null;
      matchInfo.value = null;
      matchDetail.value = null;
      await fetchMatchDetail();
    }
  },
);

// 移除 onMounted，因为已经使用 useAsyncData
onMounted(fetchMatchDetail); // ❌ 删除这行

const onTurn = (url: string) => {
  window.open(url, '_blank');
};
</script>
